<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../css/pay.css">
    <link rel="stylesheet" href="../css/message.css">

    <title>Title</title>
</head>
<body>
<div id="pay">

    <div class="divHead">
        <div class="divTitle">
            <i class="el-icon-arrow-left" @click="goBack"></i>菩提阁
        </div>
    </div>
    <div class="divContent">
        <div class="divAddress">
            <!--      -->
            <div @click="toAddressPage">
                <!--        {{address.detail}}-->
                <div class="address" v-if="address != null">{{address.detail}}</div>
                <div class="address" v-if="address == null">请选择地址</div>
                <div class="name" v-if="address != null">
                    <span>{{address.consignee}}{{address.sex === '男' ? '先生':'女士'}}</span>
                    <span>{{address.phone}}</span>
                </div>
                <i class="el-icon-arrow-right"></i>
            </div>
            <div class="divSplit"></div>
            <div class="divFinishTime">预计20分钟送达</div>
        </div>
        <div class="order">
            <div class="title">订单明细</div>
            <div class="divSplit"></div>
            <div class="itemList">
                <div class="item" v-for="(item,index) in cartData" :key="index">
                    <el-image :src=`/font/load/download?name=${item.img}`>
                        <div slot="error" class="image-slot">
                            <img src="./../images/noImg.png"/>
                        </div>
                    </el-image>
                    <div class="desc">
                        <div class="name">{{item.name}}</div>
                        <div class="numPrice">
                            <span class="num">x{{item.num}}</span>
                            <div class="price">
                                <span class="spanMoney">￥</span>{{item.num * item.price}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="note">
            <div class="title">备注</div>
        </div>
    </div>
    <div class="bottom">
        <div class="bottom-info">
            <div class="bottom-left">
                <el-badge :value="cartData.length" :hidden="cartData.length == 0" class="item"
                          style="width: 10rem;height: 10rem;position: absolute;bottom: 0">
                    <el-image :src="cartData.length ==0 ? `../images/cart.png` : `../images/cart_active.png`"
                              style="width: 12rem;height: 12rem;position: absolute;bottom: 0"></el-image>
                    <!--                    <img src="images/cart.png" style="width: 12rem;height: 12rem;position: absolute;bottom: 0">-->
                </el-badge>

            </div>
            <div class="bottom-right">
                <div style="float: left;color: white;font-size: 3rem;line-height: 8rem;">￥{{totalPrice}}</div>
                <el-row style="float: right;line-height: 9.25rem;padding-right:0.5rem ">
                    <el-button
                            :disabled="cartData.length == 0"
                            type="warning" round
                            :style="cartData.length != 0 ? `background-color: rgb(255, 190, 0);` : null"
                            style="width: 18rem;height: 7rem;font-size: 3rem;border-radius: 100px"
                            @click="payment">
                        去结算
                    </el-button>
                </el-row>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script src="../js/interceptors.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    window.addEventListener('pageshow', function (e) {
        if(e.persisted || (window.performance && window.performance.navigation.type == 2)){
            //刷新页面
            window.location.reload()
        }
    });

    new Vue({
        el: "#pay",
        data: {
            drawer: false,
            cartData:[],
            totalPrice:0,
            address:{},
        },
        methods: {

            toAddressPage(){
              location.href = "/font/page/address.html";
            },
            payment(){
                const dto = {
                    payWay:1,
                    money:this.totalPrice,
                    phone:this.address.phone,
                    address:this.address.detail,
                    userName:this.address.consignee,
                    cartList:this.cartData
                }
                axios.post("/font/indent/save",dto)
                    .then(res =>{
                        if (res.data.code == 20011){
                            location.href = "/font/page/pay-success.html";
                        }
                    })
                    .catch(err =>{
                        this.$message.error("接口异常！！！");
                    })
            },

            getDefaultAddress(){
              axios.get("/font/address/defaultAddress")
                  .then(res =>{
                      if (res.data.code == 20041){
                          this.address = res.data.data;
                      }
                  })
                  .catch(err =>{
                      this.$message.error("接口异常！！！");
                  })
            },

            getShopCart(){
                axios.get("/font/shop/shopCart")
                    .then(res =>{
                        if (res.data.code == 20041){
                            this.cartData = res.data.data;
                            console.log(this.cartData);
                            this.cartData.forEach(item =>{
                                this.totalPrice += item.num * item.price;
                            })
                            this.totalPrice = this.totalPrice.toFixed(2);
                        }
                    })
                    .catch()
            },

            handleClose() {
                this.drawer = false;
            },

            goBack() {
                location.href = "http://localhost:8080/font/index.html"
            }
        },
        mounted(){
            this.getShopCart();
            this.getDefaultAddress();
        },

    });
</script>
</html>